<div class="doc-container" [class.example-is-mobile]="mobileQuery.matches">
    <mat-toolbar color="primary" class="example-toolbar" style="justify-content: space-between; padding: 0px;"
        [style.height.px]="48">
        <div style="font-size: 16px; margin-left: 16px;;">
            {{"APP_NAME"|translate}}
        </div>
    </mat-toolbar>
    <mat-sidenav-container class="example-sidenav-container"
        [style.marginTop.px]="mobileQuery.matches ? 48 : 0">
        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
            [opened]="true"
            [fixedTopGap]="48" style="width: 256px;">
            <mat-nav-list>
                <mat-list-item mat-list-item [routerLink]="nav.link" routerLinkActive="nav-active"
                    style="font-size: 14px;" [queryParams]="nav.params" *ngFor="let nav of documentList">
                    <mat-icon style="padding-right:8px" *ngIf="nav.icon">{{nav.icon}}</mat-icon>{{nav.display| translate}}
                </mat-list-item>
            </mat-nav-list>
        </mat-sidenav>

        <mat-sidenav-content [style.padding-left.px]="mobileQuery.matches ? 15 : 30"
            [style.padding-right.px]="mobileQuery.matches ? 15 : 30">
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>